<template>
  <div class="body">
    <!-- 操作按钮 -->
    <div class="operation-module">
      <div>
        <el-button class="button_normal" size="large" type="info" @click="add"
          >添加</el-button
        >
      </div>
      <div></div>
      <div>
        <el-input type="text" v-model="search" clearable></el-input>
        <!-- <el-button @click="loadtable" size="large" type="primary"
          >搜索</el-button
        > -->
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="AdminTable">
        <el-table-column prop="id" sortable label="管理员id" />
        <el-table-column prop="adminname" label="管理员登陆名" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button class="button_normal" @click="editOpen(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确认删除？"
              @confirm="deleteLine(scope.row.id)"
            >
              <template #reference>
                <el-button class="button_delete">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->
    <div>
      <div>
        <el-pagination
          layout="prev, pager, next"
          :total="totalpage"
          current-page="currentpage"
          @current-change="currentPageChange"
        />
      </div>
    </div>
  </div>

  <!-- 对话框 -->
  <el-dialog title="添加" v-model="dialogVisible" width="30%">
    <el-form label-width="75px" style="padding: 30px">
      <el-form-item label="用户名">
        <el-input v-model="insertForm.adminname" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="insertForm.password" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button class="button_correct" @click="insert">添加</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="编辑" v-model="dialogVisible_edit" width="30%">
    <el-form label-width="75px" style="padding: 30px" :model="adminForm">
      <el-form-item label="用户名">
        <el-input v-model="adminForm.adminname" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="adminForm.password" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button class="button_correct" @click="edit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import request from "@/api/http";

export default {
  name: "userinfo",
  data() {
    return {
      adminForm: {},
      dialogVisible: false,
      search: "",
      insertForm: {
        adminname: "",
        password: "",
      },
      AdminTable: [],
      currentpage: 1,
      pagesize: 10,
      totalpage: 0,
      dialogVisible_edit: false,
    };
  },
  methods: {
    loadtable() {
      request
        .get("/admin/loadpage", {
          params: {
            PageNum: this.currentpage,
            PageSize: this.pagesize,
            Search: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          this.AdminTable = res.records;
          this.totalpage = res.total;
          this.currentpage = res.current;
        });
    },
    //添加按钮
    add() {
      //清空表单
      this.insertForm.adminname = "";
      this.insertForm.password = "";
      this.dialogVisible = true;
    },
    //实现创建管理员功能
    insert() {
      //传入数据
      request.post("/admin/insert", this.insertForm).then(
        //接收数据
        (res) => {
          if (res.code == 0) {
            window.alert("添加失败！可能添加账户已存在");
          } else {
            console.log(res.log);
            window.alert("添加成功！");
          }
          //完成创建后的后续
          this.insertForm.adminname = "";
          this.insertForm.password = "";
          this.dialogVisible = false;
          this.loadtable();
        }
      );
    },
    //实现删除管理员功能
    deleteLine(id) {
      console.log(id);
      request.delete("/admin/" + id).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "error",
            message: "删除失败！",
          });
        } else {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
        }
        this.loadtable();
      });
    },
    //实现编辑管理员功能
    edit() {
      request.put("/admin/editadmin", this.adminForm).then((res) => {
        if (res.code == "0") {
          this.$message({
            type: "error",
            message: "更新失败",
          });
        } else {
          this.$message({
            type: "success",
            message: "更新成功",
          });
        }
        this.loadtable();
      });
      //更新表格
      this.loadtable();
      this.dialogVisible_edit = false;
    },
    editOpen(row) {
      this.adminForm = JSON.parse(JSON.stringify(row)); //获取该行信息
      this.dialogVisible_edit = true; //打开编辑对话框
    },
    //页码变更时触发
    currentPageChange(currentpagecc) {
      this.currentpage = currentpagecc;
      this.loadtable();
    },
  },
  computed: {
    showTable() {},
  },
  created() {
    this.loadtable();
  },
};
</script>
<style scoped>
.body {
  position: absolute;
  width: 80%;
  margin: 20px;
  padding: 0;
}

.operation-module {
  display: flex;
}

.operation-module div {
  display: flex;
  flex: 1;
}

.button_normal {
  color: white;
  background-color: rgb(8, 134, 244);
}

.button_normal:hover {
  color: white;
  background-color: rgb(0, 85, 160);
}

.button_normal:focus {
  background: rgb(81, 168, 244);
  border-color: var(--el-button-hover-color);
  color: white;
}

.button_correct {
  color: white;
  background-color: rgb(2, 230, 158);
}

.button_correct:hover {
  color: white;
  background-color: rgb(101, 248, 192);
}

.button_correct:focus {
  color: white;
  background-color: rgb(2, 117, 69);
}

.button_delete {
  color: white;
  background-color: rgb(255, 68, 68);
}

.button_delete:focus {
  background-color: rgb(151, 15, 15);
  color: white;
}

.button_delete:hover {
  background-color: rgb(255, 103, 103);
  color: white;
}
</style>
